<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="150px">
      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">显示</el-radio-button>
    <el-radio-button :value="true">隐藏</el-radio-button>
  </el-radio-group> -->

  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    router
  >
    <Men :route="route"></Men>
  </el-menu>
      </el-aside>
      <el-container>
         <el-header>
          <el-icon @click="isCollapse = !isCollapse" v-if="isCollapse" size="3vh">
            <TurnOff />
          </el-icon>
          <el-icon @click="isCollapse = !isCollapse" v-else size="3vh">
            <Open />
          </el-icon>  

           <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item,index) in route" :key="index"  :to="{ path:item.path }">{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="ab">
             
             <el-dropdown :hide-on-click="false">
    <span class="el-dropdown-link">
      退出登录<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="tui">退出登录</el-dropdown-item>
        <el-dropdown-item>取消退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
            </div>
        </el-header>
        <el-main><RouterView></RouterView></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import Men from '@/components/Men.vue';
import router, {route} from '@/router'
import { ref,watch} from 'vue'
import { useRoute } from 'vue-router';
const isCollapse = ref(true)
// const login=JSON.parse(localStorage.getItem('obj')as string)
// console.log(78965465165,login);

const tui=()=>{
  localStorage.removeItem('token')
  router.push('/login')
}
</script>
<style>
.el-menu-vertical-demo{
   height: calc(100vh - 60px);
}
.ab{
  float: right;
}
</style>